<script lang="ts">
import { defineComponent } from '@vue/runtime-core';
export default defineComponent({
    name: 'ChildrenRouterList',
});
</script>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
defineProps<{
    parentPath: string,
    routeList: {
        meta?: {
            title?: string,
            login?: boolean
            [props: string]: any
        },
        path?: string
        [props: string]: any
    }
}>();
const route = useRoute();
const isActive = ({ path, alias }: {
    path?: string,
    alias?: Array<string>
}, parentPath: string) => {
    if (route.path.indexOf(`${parentPath}${path}`) === 0) return true;
    if (alias) {
        let len = alias.length
        for (let i = 0; i < len; i++) {
            if (route.path == `${parentPath}${alias[i]}`) {
                return true;
            }
        }
    }
    return false
}

</script>
<template lang="pug">
.list
    template(v-for="item in routeList" :key="item.path")
        .item(v-if="item.meta?.title",:class="{ active: isActive(item, parentPath), noChild: !item.children }" v-shared-element:[`route-${parentPath}${item.path}`])
            router-link.title(:to="`${parentPath}${item.path}`" replace) {{ item.meta?.title }}
                img.moreIcon(src="/src/res/svg/arrow.svg")
            .children(v-if='item.children')
                ChildrenRouterList(:parentPath="`${parentPath}${item.path}`",:routeList="item.children")
</template>
<style lang="scss" scoped>
.item {
    border-bottom: #f0faf2 1px solid;
    margin: 5px 0;
    &.active {
        > .title {
            .moreIcon {
                transform: rotate(90deg);
            }
        }
        > .children {
            display: block;
        }
        &.noChild {
            > .title {
                color: #5d5d5d;
                background-color: #f0faf2;
            }
        }
    }
    &.noChild {
        border: none;

        .title {
            .moreIcon {
                display: none;
            }
        }
    }
    .children {
        display: none;
        padding: 0 20px 10px;
        height: auto;
    }
    .title {
        position: relative;
        display: block;
        padding: 15px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
        border-radius: 15px;
        .moreIcon {
            position: absolute;
            right: 20px;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 10px;
        }
    }
}
</style>